<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box" v-if="datas.show_list">
      <div id="tool">
        <div class="title">
          <div class="spare"></div>
          <h3>{{datas.title}}</h3>
        </div>

        <div style="text-align: center;font-size: 18px" v-if="datas.show_list.length <= 0">请设置显示板块内容</div>

        <ul class="tool-box" v-if="datas.list_style == '1'">
          <li v-for="icon in datas.show_list" :key="icon.url">
            <img class="diy-img" :src="icon.image || emptyImage" :onerror="errorImg01" alt="">
            <!--<i class="iconfont" :class="icon.class"></i>-->
            <div>{{icon.title}}</div>
          </li>
          <li v-for="(item, index) in datas.list" :key="index">
            <img class="diy-img" :src="item.image || emptyImage" alt="">
            <div style="margin-top: 10px">{{item.text}}</div>
          </li>
        </ul>
        <ul class="tool-boxlis" v-if="datas.list_style == '2'">
          <li v-for="icon in datas.show_list" :key="icon.url">
            <div class="lis">
              <img class="diy-img" :src="icon.image || emptyImage" :onerror="errorImg01" alt="">
              <!--<i class="iconfont" :class="icon.class" style="font-size: 28px;"></i>-->
              <div>{{icon.title}}</div>
            </div>
            <i class="iconfont icon-member_right"></i>
          </li>
          <li v-for="(item, index) in datas.list" :key="index">
            <div class="lis">
              <img class="diy-img" :src="item.image || emptyImage" alt="">
              <div>{{item.text}}</div>
            </div>
            <i class="iconfont icon-member_right"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				text_color
			} = this.datas;

			return `
      .component-${this.id} .html-box {
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
      }

      .component-${this.id} .html-box .tool-box, .component-${this.id} .html-box .tool-boxlis{
          color: ${text_color};
      }
  `;
		}
	};

	export default {
		props: ["id", "datas", "styles"],
		data() {
			return {
				emptyImage,
				errorImg01: 'this.src="' + require('@/resource/images/image.png') + '"'
			};
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},
		methods: {},
	};
</script>

<style lang="less" scoped>
  * {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // 默认
  .component-wrapper {
    width: 375px;
  }

  .html-box {
    min-height: 30px;
  }

  #tool {
    overflow: hidden;
    color: #333;
    .title {
      display: flex;
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      /*border: solid 1px #f3f3f3;*/
    }
    .spare {
      width: 4px;
      height: 16px;
      border-radius: 1px;
      background-color: #f15353;
      margin-top: 12px;
      margin-right: 6px;
    }
    h3 {
      color: #333;
      text-align: left;
      font-size: 16px;
      box-sizing: border-box;
    }
    .tool-boxlis {
      display: -webkit-box;
      display: -webkit-flex;
      padding: 20px 0 10px 0;
      flex-direction: column;
      .lis {
        display: flex;
        align-items: center;
        font-size: 16px;
      }
      .diy-img {
        width: 23px;
        height: 23px;
        margin: 6px;
        display: block;
      }
      li {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        margin-bottom: 10px;
        padding: 0 10px;
        .span {
          line-height: 30px;
        }
      }
      li i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        color: #c9c9c9;
        line-height: 36px;
        /*margin-bottom: 4px;*/
      }
      li .lis i {
        color: #f15353;
        font-size: 25px;
      }
    }
    .tool-box {
      padding: 20px 0 10px 0;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 25%;
        position: relative;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        margin-bottom: 10px;
        .span {
          line-height: 30px;
        }
      }
      .diy-img {
        width: 28px;
        height: 28px;
        margin: 6px auto;
        display: block;
      }
      li i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        line-height: 36px;
        font-size: 20px;
        margin-bottom: 8px
      }
      // 工具图标
      .iconfont {
        display: inline-block;
        font-size: 30px;
        color: rgb(241, 83, 83);
      }
      .icon-member-bank-list1 {
        background: url("../../../resource/images/member/member_a(29).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-bank-list1:before {
        content: "";
      }
      .icon-member-collect1 {
        background: url("../../../resource/images/member/member_a(41).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-collect1:before {
        content: "";
      }
      .icon-member-get-up {
        background: url("../../../resource/images/member/member_a(47).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-get-up:before {
        content: "";
      }
      .icon-member-act-signup1 {
        background: url("../../../resource/images/member/member_a(15).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-act-signup1:before {
        content: "";
      }
      .icon-member-course3 {
        background: url("../../../resource/images/member/member_a(22).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-course3:before {
        content: "";
      }
      .icon-member_goods {
        background: url("../../../resource/images/member/member_a(52).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_goods:before {
        content: "";
      }
      .icon-card {
        background: url("../../../resource/images/member/member_a(57).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-card:before {
        content: "";
      }
      .icon-member-recharge1 {
        background: url("../../../resource/images/member/member_a(3).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-recharge1:before {
        content: "";
      }
      .icon-member_my-friend {
        background: url("../../../resource/images/member/member_a(63).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_my-friend:before {
        content: "";
      }
      .icon-member_card1 {
        background: url("../../../resource/images/member/member_a(58).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_card1:before {
        content: "";
      }
      .icon-extension_goods_order {
        background: url("../../../resource/images/member/member_a(59).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-extension_goods_order:before {
        content: "";
      }
      .icon-member_my-card {
        background: url("../../../resource/images/member/member_a(64).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_my-card:before {
        content: "";
      }
      .icon-member_material {
        background: url("../../../resource/images/member/member_a(65).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_material:before {
        content: "";
      }
      .icon-member-help {
        background: url("../../../resource/images/member/member_a(2).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-help:before {
        content: "";
      }
      .icon-member-clock1 {
        background: url("../../../resource/images/member/member_a(30).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-clock1:before {
        content: "";
      }
      .icon-member-express-list {
        background: url("../../../resource/images/member/member_a(68).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member-express-list:before {
        content: "";
      }
      .icon-declaration_system {
        background: url("../../../resource/images/member/member_a(66).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-declaration_system:before {
        content: "";
      }
      .icon-order_system {
        background: url("../../../resource/images/member/member_a(70).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-order_system:before {
        content: "";
      }
      .icon-fontclass-erweima {
        background: url("../../../resource/images/member/tool_a(2).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-erweima:before {
        content: "";
      }
      .icon-fontclass-kehu {
        background: url("../../../resource/images/member/tool_a(3).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-kehu:before {
        content: "";
      }
      .icon-fontclass-pinglun {
        background: url("../../../resource/images/member/tool_a(4).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-pinglun:before {
        content: "";
      }
      .icon-fontclass-youhuiquan {
        background: url("../../../resource/images/member/tool_a(7).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-youhuiquan:before {
        content: "";
      }
      .icon-member_mygroup {
        background: url("../../../resource/images/member/member_a(72).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_mygroup:before {
        content: "";
      }
      .icon-extension_video {
        background: url("../../../resource/images/member/member_a(73).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-extension_video:before {
        content: "";
      }
      .icon-member_changer_centre {
        background: url("../../../resource/images/member/member_a(74).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_changer_centre:before {
        content: "";
      }
      .icon-member_live_normal {
        background: url('../../../resource/images/member/member_a(92).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_live_normal:before {
        content: '';
      }
      .icon-member_community {
        background: url('../../../resource/images/member/member_a(74).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_community:before {
        content: '';
      }
      .icon-member_advertise_market {
        background: url('../../../resource/images/member/member_a(84).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_advertise_market:before {
        content: '';
      }
      .icon-member_bonus_pools {
        background: url("../../../resource/images/member/member_a(81).png") no-repeat
        center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_bonus_pools::before {
        content: "";
      }
      .icon-member_bonus_pools::before {
        content: "";
      }
      .icon-member_ejiayou {
        background: url('../../../resource/images/member/member_a(103).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_ejiayou::before {
        content: "";
      }
      .icon-member_area_search{
        background: url('../../../resource/images/member/member_a(121).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-member_area_search::before {
        content: "";
      }
      .icon-fontclass-xiaoshoubaobiao{
        background: url('../../../resource/images/member/member_a(128).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-xiaoshoubaobiao::before {
        content: "";
      }
      .icon-fontclass-tihuoka {
        background: url('../../../resource/images/member/member_a(127).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }
      .icon-fontclass-tihuoka::before {
        content: "";
      }

      .icon-fontclass-cefu {
        background: url('../../../resource/images/member/member_a(129).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px
      }

      .icon-fontclass-cefu::before {
        content: '';
      }

      .icon-fontclass-quanzi2 {
        background: url('../../../resource/images/member/member_a(146).png') no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px;
      }
      .icon-fontclass-quanzi2::before {
        content:"";
      }

      .icon-fontclass-anliku {
        background: url("../../../resource/images/member/member_a(132).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px;
      }

      .icon-fontclass-anliku::before {
        content: "";
      }

      .icon-fontclass-choujianghuodong {
        background: url("../../../resource/images/member/member_a(138).png") no-repeat center;
        background-size: 28px;
        width: 100%;
        margin-bottom: 4px;
      }
      .icon-fontclass-choujianghuodong::before {
        content: "";
      }
    }

  }

</style>
